<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Linked Open Aalto Data Service - Visualization Playground</title>
		<script src="https://www.google.com/jsapi"></script>
        <script src="js/vendor/modernizr-2.6.1.min.js"></script>
        <script src="js/vendor/jquery-1.8.2.min.js"></script>
		<script id="run" src="js/jQSparql.js"></script>
		<script src="js/rawdeflate.js"></script>
		<script src="js/rawinflate.js"></script>
		<script src="js/js-sparql-parser/sparql_parser.js"></script>
		<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
		<!--<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
		<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
		<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
		<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>-->	
		<!-- CSS -->
		<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
		<!--<link href="css/bootstrap.css" rel="stylesheet">-->
        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
		<style type="text/css">
	
    #endpoints {
	list-style: none;
	margin-left: 1;
	text-indent: -1em;
	}
	
	.myheader h5 { 
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		font-size: 15px;
		margin: 0;
		padding: 0;
		}
	
	#endpoints li {
		margin-top: -0.5em;
		font-size: 10px;
		width: 380px;
	}
	
	.m a { font-size: 14px; }
	.m a:link {text-decoration: none; }
    .m a:visited {text-decoration: none; color: black;}
    .m a:active {text-decoration: none; color: black;}
    .m a:hover {text-decoration: none; cursor: pointer;}
    
    .m { color: black; cursor: pointer; }
    .m:link {text-decoration: none; color: black;}
    .m:visited {text-decoration: none; color: black;}
    .m:active {text-decoration: none; color: black;}
    .m:hover {text-decoration: none; color: gray; cursor: pointer;}
	
	.newvisualization {
		    width: 250px;
		    height: 150px;
            font-size: 2em;
            border: 1px solid black;
            overflow: scroll;
            resize: both;
            padding: 5px;
        } 

    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body>
<div class="contain">
	  <div class="myheader">
		  <hgroup style="margin: 0; padding: 0;" id="mainheading">
			<h1><a style="color:black;" href="./">Linked Open Aalto Data Service</a></h1>
			<h2 style="margin-bottom:5px;">VISUalization Playground</h2>
		</hgroup>
          <div style="margin:0; padding:0;" id="addendpoints">
          <h5>Add endpoints <a class="m" id="add">+</a> <a class="m" id="remove">-</a></h5>
          <ul id="endpoints">
         <!-- <li id="httpdataaaltofisparql" class="endpoint" contenteditable="true" >http://data.aalto.fi/sparql</li> -->
          </ul>
          </div>
       </div>
<section>
<div>
<div id="modal" class="modal hide">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="modal-header">Modal header</h3>
  </div>
  <div class="modal-body">
	<div id="modal-add"></div>
    <div id="modal-body">One fine body…</div>
  </div>
  <div class="modal-footer">
	<button title="Press Ctrl+C to copy" class="btn" onclick="selectText('modal-body')">Select text</button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>
<p id="load" style="display: inherit;">Loading <img src="img/loadstat.gif" alt="Loading ..."/></p>
<div id="sparqlviz"><div class="form" id="queryForm" style="display: none;">

<div>
<select id="querySelect" style=" margin-bottom: 10px; width:415px;>
<option value="-1">New query</option>
<option value="0">Class usage in certain domain</option>
<option value="1">Number of triples in graphs</option>
<option value="2">Class usage</option>
<option value="3">Property usage</option>
<option value="4">Vocabulary usage</option>
</select>
	
</div>	
<div class="accordion" id="accordion2" style=" margin-bottom: 10px; width:415px;">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="m accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Show available prefixes
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
      <div class="accordion-inner">
        <p id="prefix" style="font-size: 10px;"></p>
      </div>
    </div>
  </div>
</div>  	

<textarea id="area" style="width:400px; height:150px;">
## Write a new query
SELECT (COUNT(?s) as ?c) WHERE { ?s a ?o FILTER(REGEX(STR(?o), 'http://xmlns.com/foaf/0.1/'))}
</textarea>
<div>
<div>
<label class="checkbox" id="prefixify">
  <input type="checkbox">
  Prefixify uris
</label>
</div>
<div id="radios" style="display: none;">
<label class="radio">
  <input type="radio" name="options" id="flat" value=1 checked>
  Combine resultsets as rows
</label>
<label class="radio">
  <input type="radio" name="options" id="group" value=2>
  Group by <input type="text" style="width:50px; height:20px;" id="groupBy" value="?"></input> and get
  <select id="groupMethod" style="width:80px; height:25px;">
	  <option value="count" selected>Count</option>
	  <option value="avg">Avg</option>
	  <option value="max">Max</option>
	  <option value="min">Min</option>
	  <option value="sum">Sum</option>
   </select> from 
   <input type="text" style="width:50px; height:20px;" id="to" value="?"></input> 
</label>
<label class="radio">
  <input type="radio" name="options" id="col" value=3>
  Combine resultsets as columns (same length expected)
</label>
</div>
<button class="btn" id="query">Visualize</button>
</div></div>
</div>
</div>
</section>
<section>
	<div id="helper"></div>
<div id="chartHolder">
<div id="editChart" style="visibility:hidden;">
	<a class="m btn-link btn" onclick='openEditor()'>Visualize</a> 

	<div class="btn-group">
        <a class="m btn-link btn dropdown-toggle" data-toggle="dropdown" href="#">
            Edit
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#" onclick='editQuery()'>Edit query</a></li>
            <li><a href="#" onclick='newQuery()'>New query</a></li>
            <li><a href="#" onclick='resize()'>Resize chart</a></li>
            <li><a href="#" onclick='manualEdit()'>Manual edit</a></li>
        </ul>
    </div>
	<div class="btn-group">
        <a class="m btn-link btn dropdown-toggle" data-toggle="dropdown" href="#">
            Export
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <!--<li><a href="#" onclick='publish()'>Link to static chart</a></li>-->
            <li><a href="#" onclick='dataTableToCSV()'>Export data to CSV</a></li>
            <li><a href="#" onclick='exportWrapper()'>Export Google Chart JSON</a></li>
            <li><a href="#" onclick='log()'>Log SPARQL response(s)</a></li>
        </ul>
        <a class="m btn-link btn" target="_blank" href="visuhelp">Help</a> 
    </div>
</div>
<div><h2 id="title"></h2></div>
<div id="message"></div>
<div id='visualization'></div>
</div>
<div style="visibility:hidden;" id="querycopy"></div>
<div style="visibility:hidden;" id="urlcopy"></div>
</section>
</div>
</body>
<script src="js/visu.js"></script>
</html>

